<template>
  <div class="login-register-container">
    <div class="form-box">
      <div class="tab-buttons">
        <el-button :class="{ active: currentTab === 'login' }" @click="currentTab = 'login'">登录</el-button>
        <el-button :class="{ active: currentTab === 'register' }" @click="currentTab = 'register'">注册</el-button>
      </div>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input v-model="form.pwd" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <template v-if="currentTab === 'register'">
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input v-model="form.confirmPwd" type="password" placeholder="请再次输入密码"></el-input>
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">
            {{ currentTab === 'login' ? '登录' : '注册' }}
          </el-button>
          <el-button @click="formRef.resetFields()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
// 引入仓库保存用户信息
import { useUserStore } from '@/stores/userStore';

const router = useRouter()

const currentTab = ref('login');
const formRef = ref(null);
const form = ref({
  name: '',
  pwd: '',
  confirmPwd: ''
});
const rules = ref({
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  pwd: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度不能少于 6 位', trigger: 'blur' }
  ],
  confirmPwd: [
    {
      validator: (rule, value, callback) => {
        if (currentTab.value === 'register' && value !== form.value.pwd) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

const userStore = useUserStore()

// 点击提交事件
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (currentTab.value === 'login') {
        console.log(form.value.name);
        console.log(form.value.pwd);
        // 登录事件
        axios.post('/api/user/login', {
          name: form.value.name,
          pwd: form.value.pwd
        })
          .then(response => {
            console.log('登录成功', response.data.user);
            // 这里可以添加登录成功后的逻辑，如跳转到主页
            alert(response.data.message)
            router.push('/')
            console.log(response.data.token);
            // 保存token
            localStorage.setItem('token', response.data.token)
            userStore.setUserInfo(response.data.user)
            localStorage.setItem('userName', response.data.user.name)
            console.log(userStore.userInfo);
          })
          .catch(error => {
            console.error('登录失败', error.response ? error.response.data : error.message);
          });
      } else {
        // 注册事件
        axios.post('/api/user/register', {
          name: form.value.name,
          pwd: form.value.pwd
        })
          .then(response => {
            console.log('注册成功', response.data);
            // 注册成功后切换到登录页
            currentTab.value = 'login';
          })
          .catch(error => {
            console.error('注册失败', error.response ? error.response.data : error.message);
          });
      }
    } else {
      console.log('表单验证失败');
      return false;
    }
  });
};
</script>

<style scoped>
.login-register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.form-box {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: 380px;
}

.tab-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.tab-buttons .el-button {
  margin: 0 10px;
}

.tab-buttons .el-button.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
</style>